<template>
<div style="height:200px">
  <div class="header-1">
    <div></div>
    <div>
      <h1>logo</h1>
    </div>
    <div>
      <div class="inputboxAlign">
        <el-input  v-model="input" placeholder="请输入内容"></el-input>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
    <div @click="topage('/shoppingCart')" class="cursor_style">
      <i class="el-icon-shopping-cart-full"></i>购物车
    </div>
    <!--loginCheck做判断在进行跳转，如果是true则跳转mine，false跳转login  -->
    <div @click="loginCheck ? topage('/mine') : topage('/login')" class="cursor_style">
      <i class="el-icon-user-solid"></i>{{ showUserName }}
      <!-- 显示用户名的 -->
    </div>
    <!-- <div><i class="el-icon-edit"></i>个人中心</div> -->
  </div>
  <div class="header-2">
    <div></div>
    <div></div>
    <!-- 跳转 -->
    <div @click="topage('home')">首页</div>
    <div @click="topage('allgoods')">男装</div>
    <div @click="topage('allgoods')">女装</div>
    <div @click="topage('allgoods')">鞋子</div>
  </div>
</div>
</template>

<script>
    export default {
        data() {
            return {
                // 定义
                input: null,
                showUserName: ""
            };
        },
        // 在html页面加载后加载
        mounted() {
            // 调用store中state中loginstate，从而改变data的showUserName
            this.showUserName = this.$store.state.showUserName;
        },
        // 方法
        methods: {
            // 跳转路由，在router文件中
            topage(toPath) {
                this.$router.push(toPath);
            }
        },
        // 计算属性
        computed: {
            // 调用store中state中loginstate
            loginCheck: function() {
                return this.$store.state.loginstate;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .cursor_style {
        cursor: pointer;
    }
    
    .header-1 {
        display: grid;
        // width: 100%;
        grid-template-columns: 165px 600px 1fr repeat(3, 90px) 50px;
        // grid-template-rows: 50px;
        justify-content: center;
        align-items: center;
        height: 50%;
        margin-right: calc(100% - 100vw);
        i {
            margin: 0 10px;
        }
        .inputboxAlign {
            text-align: left;
            display: flex;
            justify-content: flex-start;
            max-width: 500px;
        }
        .el-button {
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            margin-left: 5px;
        }
    }
    
    .header-2 {
        display: grid;
        grid-template-columns: repeat(6, 80px) 1fr;
        height: 30%;
        justify-content: center;
        align-items: center;
        background-color: black;
        color: white;
        //margin-left: calc(100% - 100vw);
        div {
            cursor: pointer;
            //margin-left: 80%;
        }
    }
</style>